<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./css/admin.css">

    <title>参赛国家管理</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="./">奖牌榜管理后台系统</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">参赛国家</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">体育项目</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">参赛人员</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">获奖信息</a>
                </li>
            </ul>
            <div class="ml-auto">
                <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-user"></i>个人中心
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <button class="dropdown-item" type="button">个人信息</button>
                    <button class="dropdown-item" type="button">联系客服</button>
                    <div class="dropdown-divider"></div>
                    <button class="dropdown-item" type="button">退出登录</button>
                </div>
            </div>
        </div>
    </nav>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">首页</li>
            <li class="breadcrumb-item">参赛国家管理</li>
        </ol>
    </nav>
    <div class="container">
        <div class="text-right pr-5">
            <button class="btn btn-success"><i class="fa fa-plus"></i></button>
        </div>
        <table class="table table-hover mt-3">
            <thead>
            <tr>
                <th scope="col">国旗</th>
                <th scope="col">国家代码</th>
                <th scope="col">国家中文名</th>
                <th scope="col">国家英文名</th>
                <th scope="col">国家简称</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody class="_datagrid">
            <tr>
                <td>img</td>
                <td>CN</td>
                <td>中华人民共和国</td>
                <td>China</td>
                <td>中国</td>
                <td class="p-2">
                    <div class="btn-group" >
                        <button type="button" class="btn btn-primary" title="修改"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-danger" title="删除"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>img</td>
                <td>CN</td>
                <td>中华人民共和国</td>
                <td>China</td>
                <td>中国</td>
                <td class="">
                    <div class="btn-group" >
                        <button type="button" class="btn btn-primary" title="修改"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-danger" title="删除"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>img</td>
                <td>CN</td>
                <td>中华人民共和国</td>
                <td>China</td>
                <td>中国</td>
                <td class="">
                    <div class="btn-group" >
                        <button type="button" class="btn btn-primary" title="修改"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-danger" title="删除"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>img</td>
                <td>CN</td>
                <td>中华人民共和国</td>
                <td>China</td>
                <td>中国</td>
                <td class="">
                    <div class="btn-group" >
                        <button type="button" class="btn btn-primary" title="修改"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-danger" title="删除"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>img</td>
                <td>CN</td>
                <td>中华人民共和国</td>
                <td>China</td>
                <td>中国</td>
                <td class="">
                    <div class="btn-group" >
                        <button type="button" class="btn btn-primary" title="修改"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-danger" title="删除"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>img</td>
                <td>CN</td>
                <td>中华人民共和国</td>
                <td>China</td>
                <td>中国</td>
                <td class="">
                    <div class="btn-group" >
                        <button type="button" class="btn btn-primary" title="修改"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-danger" title="删除"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>img</td>
                <td>CN</td>
                <td>中华人民共和国</td>
                <td>China</td>
                <td>中国</td>
                <td class="">
                    <div class="btn-group" >
                        <button type="button" class="btn btn-primary" title="修改"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-danger" title="删除"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>img</td>
                <td>CN</td>
                <td>中华人民共和国</td>
                <td>China</td>
                <td>中国</td>
                <td class="">
                    <div class="btn-group" >
                        <button type="button" class="btn btn-primary" title="修改"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-danger" title="删除"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <script>
        let datagrid = document.querySelector("._datagrid");
        /**
         * 加载数据
         */
        let loadData = function () {
            fetch("country-list.let").then((r) => r.json()).then((data) => {
                console.debug(data);
                datagrid.innerHTML = "";
                data.forEach((item, index) => {
                    let tr = document.createElement("tr");
                    tr.innerHTML = `
                    <td>${index + 1}</td>
                    <td>${item.countryCode}</td>
                    <td>${item.countryNameCn}</td>
                    <td>${item.countryNameEn}</td>
                    <td>${item.countryName}</td>
                    <td class="p-2">
                        <div class="btn-group" >
                            <button type="button" class="btn btn-primary" title="修改"><i class="fa fa-edit"></i></button>
                            <button type="button" class="btn btn-danger" title="删除"><i class="fa fa-trash"></i></button>
                        </div>
                    </td>`;
                    datagrid.appendChild(tr);
                });
            }).catch((e) => {
                console.error(e);
            });
        }
        loadData();
    </script>
</body>
</html>